﻿@model IEnumerable<CarparkIMS_CMS.Models.CameraParkingModel>
@{
    ViewData["Title"] = "Index";
}

<h1>
    泊車位狀態列表
</h1>

<div class="container bg-light" style="min-width:992px;">
    <table class="table table-responsive table-responsive-md table-striped" >
        <thead>
            <tr>
                <th>
                    Camera Ip
                </th>
                <th style="min-width:280px;">
                    Parking Place Number#
                </th>
                <th style="min-width:310px;">
                    Status
                </th>
                <th style="width:100%;">
                    <i class="fa fa-clock"></i>
                </th> 
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                string statusDes = item.Deleted ? "<i class='fas fa-stop mr-1'></i>OUT OF SERVICE" : "<i class='fas fa-play mr-1'></i>IN SERVICE";
                <tr>
                    <td>
                        @item.CameraIP
                    </td>
                    <td class="text-nowrap">
                                <span class="rounded text-secondary p-1" style="width:80px;"> @item.ParkingPlaceId </span>
                                            <label>/</label>
                                <span class="rounded text-dark p-1 mr-2" style="width:80px;"> @item.ParkingPlaceSharpNumber </span>
                        
                        <button id="@item.ID" class="ServiceStatusBtn btn btn-sm text-danger p-1" style="font-weight:600;" data-status="@item.Deleted" data-id="@item.ID" )">
                            @Html.Raw(statusDes)
                        </button>
                    </td>
                    <td class="nowrap">
                        @if (item.llqqNumberPlate == null)
                        {
                            <span class="rounded badge-warning p-2"> 車位空置中 </span>
                        }
                        else if (item.llqqNumberPlate.EndDatetime == null)
                        {
                            <span class="rounded badge-success p-2"> 車位使用中 </span>
                        }
                        else if (item.llqqNumberPlate.EndDatetime != null)
                        {
                            <span class="rounded badge-warning p-2"> 車位空置中 </span>
                        }

                        <span class="RefreshSpan rounded badge-warning ml-3 p-2"><i class="fas fa-sync-alt fa-1x"></i> </span>
                    </td>
                    <td>
                        @if (item.llqqNumberPlate?.StartDatetime != null && item.llqqNumberPlate?.EndDatetime == null)
                        {
                            <div class="d-flex flex-row bd-highlight">
                                <div class="bd-highlight">
                                    <span class="text-black-50"> 開始時間：</span>
                                 </div>
                                <div class="bd-highlight">
                                    <span class="rounded text-bold">
                                        @Html.Raw(string.Format("{0:HH:mm:ss <br> yyyy-MM-dd}",item.llqqNumberPlate.StartDatetime))
                                    </span>
                                </div> 
                            </div>
                        }else{
                            <span class="rounded text-bold">- </span>
                        }
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <div id="reloading" class="label label-primary text-black-50"></div>
</div>
<script>

    $(".ServiceStatusBtn").click(function (e) { 
        console.log(e.target);
        var tag = e.srcElement || e.target;
        var id = tag.id;
        var ids = "#" + id;
        console.log(id);
        var status = $(ids).data("status");
        console.log("status = " + status);
        var url1 = "/Home/ParkinngPlaceChange/" + id;
        $.get(url1, function (ret, status) {
            console.log(ret);
            if (status != undefined) {
                if (status == "success") {
                    console.log({ "status": status });
                    $(ids).data("status", ret.data.deleted);
                    $(ids).data("id", ret.data.id);

                    layer.open({
                        title: 'Return'
                        , content: ret.meta.message + "<br>del status=" + ret.data.deleted
                        , btn: 'OK'
                    });

                    if (ret.data.deleted) {
                        $(ids).html("<i class='fas fa-stop mr-1'></i> OUT OF SERVICE");
                    } else {
                        $(ids).html("<i class='fas fa-play mr-1'></i> IN SERVICE");
                    }
                } else {
                    layer.msg("NETWORK ERROR!");
                }
            } else {
                layer.msg("NETWORK ERROR!");
            }
        });
    });
</script>
<script>
   

    function sleep(millisecond) {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve()
            }, millisecond)
        })
    }


    async function ExcReloading() {

        const start = new Date().getTime();

        console.log("Exec Start", start);

        await sleep(3000);

        setInterval(async function() {

            $("#reloading").html("reloading......");

            console.log("reloading......");

            await sleep(3000);

            window.location.reload();

        }, 23000);

        console.log("Exec End", new Date().getTime() - start,"ms")
    }

    ExcReloading();


    $(".RefreshSpan").on('click', function () {
          
        var url = "/Journal/RefreshParkingState";
        $.ajax({
            url: url,
            headers: { "Authorization": "123456" },
            type: "get",
            statusCode: {
                401: function () {
                    alert("token error(Authorized fail)");
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {

                console.log("jqXHR  = \n");
                console.log(jqXHR);
                console.log("\n"); 
            },
            success: function (res) {

                layer.open({
                    title: 'Result'
                    , content: res.meta.message
                    , btn: 'OK'
                });

                ExcReloading();

            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.log("jqXHR  = \n");
            console.log(jqXHR);
            console.log("\n");
            console.log("Media server api : /url :\n" + url);
            layer.open({
                title: 'Result'
                , content: "error"
                , btn: 'OK'
            });
        })
    });


</script>
